<template>
  <div id="snowpacklist">
    <!-- <button @click="getscenicList">获取雪场列表数据</button> -->
    <!-- <button @click="getscenicProductList">获取商品列表数据</button> -->
    <!-- <button @click="getcommentsList">获取评论列表数据</button> -->
    <div class="nav_hedr">
      <div class="snow_list">
        <span>全部雪场数量</span
        ><span class="text_1">{{ this.scenicTotalNum }}</span
        ><span>个,</span><span>上线产品总数量</span
        ><span class="text_2">{{ this.proAllNum }}</span
        ><span>个</span>
      </div>
      <div class="query_se">
        <div class="query">
          <span>雪场名称</span>
          <el-input
            class="snow_name"
            v-model="item_serach.scenicName"
          ></el-input>
        </div>
        <div class="query_snow_1">
          <span>省份</span>
          <el-input placeholder="请选择" v-model="item_serach.provinceId">
          </el-input>
        </div>
      </div>
      <div class="snow_btn">
        <el-button type="primary" @click="snow_serach">查询</el-button>
      </div>
    </div>
    <div class="snow_footer">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column prop="scenicid" label="雪场ID号" width="180">
        </el-table-column>
        <el-table-column prop="fullname" label="雪场名称" width="180">
        </el-table-column>
        <el-table-column prop="appid" label="APP ID"> </el-table-column>
        <el-table-column prop="product_num" label="商品数量"> </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.scenicid)"
              type="text"
              size="small"
              >商品列表</el-button
            >
            <el-button type="text" size="small">雪场详情</el-button>
            <el-button
              @click="goon(scope.row.scenicid)"
              type="text"
              size="small"
              >评论</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="pagesize"
          background
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getscenicList,
  getscenicProductList,
  getcommentsList,
} from "../request/index";
import paging from "../components/Paging.vue";
export default {
  components: { paging },
  data() {
    return {
      channelList: [],
      channel: "",
      cardtf: false,
      pageChecked: true,
      input1: 1,
      sousuok: false,
     
      multipleSelection: [],
      total: 0,

      pagesize: null,
      pageno: "",
      item_serach: {
        scenicName: "",
        provinceId: "",
      },
      currentPage: 1,
      scenicTotalNum: "",
      proAllNum: "",
      tableData: [
        {
          date: "",
          name: "",
          address: "",
          shoplist: "",
          time: "",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      inputx: "",
    };
  },
  methods: {
    //搜索
    snow_serach() {
      getscenicList(this.item_serach).then((res) => {
        console.log(res);
        this.tableData=res.list
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //翻页
    handleCurrentChange() {
      getscenicList({ page: this.pageno }).then((res) => {
        console.log(res);
        console.log(this.pageno);
      });
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    getscenicList() {
      console.log(111);
      getscenicList().then((res) => {
        console.log(res);
        this.tableData = res.list;
        this.pagesize = res.pageSize;
        this.total = res.count;
        this.scenicTotalNum = res.scenicTotalNum;
        this.proAllNum = res.proAllNum;
        this.pageno = res.pageNo;

      });
    },
    getscenicProductList() {
      getscenicProductList({ scenicId: 140 }).then((res) => {
        console.log(res);
      });
    },
    getcommentsList() {
      getcommentsList().then((res) => {
        console.log(res);
        this.tableData = res.list;
        console.log(this.tableData);
      });
    },
    goon(scenicid) {
      //   this.$router.push("/merpar");
      this.$router.push({
        path: "/comment",
        query: {
          id: scenicid,
        },
      });
    },
    handleClick(scenicid) {
      this.$router.push({
        path: "/productlist",
        query: {
          id: scenicid,
        },
      });
    },
  },
  mounted() {
    this.getscenicList();
  },
};
</script>
<style scoped>
#snowpacklist {
  width: 100%;
  height: 800px;
  /* background-color: red; */
}

.cell {
  text-align: center;
}

.block {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  bottom: 30px;
  left: 530px;
}

.snow_footer {
  width: 100%;
  background-color: #fff;
  position: relative;
  top: 50px;
  border-radius: 10px;
  height: 630px;
}

.query_snow_1 {
  position: absolute;
  left: 21%;
  top: 54%;
}

.snow_btn {
  position: absolute;
  right: 2%;
  top: 50%;
}

.nav_hedr {
  width: 100%;
  height: 145px;
  background-color: #fff;
  position: relative;
  top: 20px;
  border-radius: 10px;
}

.snow_list {
  width: 98%;
  height: 40px;
  background-color: #ebf4ff;
  position: absolute;
  left: 1%;
  top: 5%;
  border-radius: 5px;
}

.snow_list {
  line-height: 40px;
}

.text_1 {
  color: #3d85ff;
  font-size: 20px;
}

.text_2 {
  color: #3d85ff;
  font-size: 20px;
}

.snow_name {
  display: inline-block;
  width: 200px;
  height: 25px;
}

.query {
  position: absolute;
  left: 3%;
  top: 54%;
}

.el-input__inner {
  height: 35px;
  margin-left: 5px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 200px !important;
}
</style>